<template>
  <vue-dropzone
    ref="myVueDropzone"
    id="dropzone"
    class="single-picture"
    v-if="isShow && dropzoneOptions && dropzoneOptions.paramName"
    :options="dropzoneOptions"
    @vdropzone-success="uploadSuccessed">
    上传
  </vue-dropzone>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

// TODO 配置文档地址
// 官方文档: https://www.dropzonejs.com/#config-uploadMultiple
// 第三方文档: https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/installation
// 文件上传配置
var dropzoneOptions = {
  previewTemplate: '<div>上传中...</div>',
  // 文件post表单名称
  paramName: 'myUploadFile',
  // 最大上传文件数量
  maxFiles: 1,
  // 允许文件类型
  acceptedFiles: 'image/*',
  // 显示预览图宽度
  thumbnailWidth: 150,
  // 文件大小限制
  maxFilesize: 1.5,
  // 是否允许删除文件
  addRemoveLinks: true,

  // 提示信息
  dictDefaultMessage: '点击上传',
  dictFileTooBig: '当前文件大小: {{filesize}}M,超过允许最大: {{maxFilesize}}M',
  dictResponseError: '服务器返回错误: {{statusCode}}',
  dictCancelUpload: '取消上传',
  dictUploadCanceled: '取消上传',
  dictCancelUploadConfirmation: '您确认要取消已上传的文件吗?',
  dictRemoveFile: '移除文件',
  dictRemoveFileConfirmation: '您确认要取消当前选择的文件吗',
  dictMaxFilesExceeded: '最大文件选择数量不能超过: {{maxFiles}}个',
  dictFallbackMessage: '浏览器不支持',
  dictInvalidFileType: '不支持当前上传类型'
}
// 文件上传组件
export default {
  name: 'CommonFormUploadFile',
  components: {
    vueDropzone: vue2Dropzone
  },
  props: {
    // 字段名
    field: String,
    // 允许上传类型
    acceptedFiles: String,
    // 回调方法
    callBack: Function
  },
  data: function () {
    return {
      dropzoneOptions: {},
      isShow: true,
      completedUploadFileArr: []
    }
  },
  mounted: function () {
    var $this = this
    $this.initConfig()
  },
  watch: {
    isShow: function () {
      if (this.isShow === true) {
        this.initConfig()
      }
    }
  },
  methods: {
    // 初始化配置信息
    initConfig: function () {
      // this.$refs.myVueDropzone.removeAllFiles ? this.$refs.myVueDropzone.removeAllFiles() : 1
      this.completedUploadFileArr = []
      // 上传文件数量限制
      if (this.$props.maxFiles) {
        dropzoneOptions.maxFiles = this.$props.maxFiles
      }
      // 允许上传文件类型: image/*
      if (this.$props.acceptedFiles) {
        dropzoneOptions.acceptedFiles = this.$props.acceptedFiles
      }
      // 服务器上传地址
      dropzoneOptions.url = this.UploadFileUrl
      // 表单头部信息
      dropzoneOptions.headers = this.getHeader()
      this.dropzoneOptions = dropzoneOptions
      // var $this = this
      this.$forceUpdate()
    },
    // 上传完毕
    uploadSuccessed: function (file, response) {
      if (response.code === 0) {
        this.$refs.myVueDropzone.removeAllFiles()
        this.tip('上传成功!')
        // 如果超过最大数量的话
        this.$props.callBack(this.$props.field, response.data)
      } else {
        this.tip('上传出错:' + response.message, 'error')
      }
    }
  }
}
</script>
<style>
#dropzone.single-picture {
  width: 110px;
  height: 31px;
  padding: 0px;
  line-height: 30px;
  overflow: hidden;
  position: absolute;
  margin: 0px;
  left: 205px;
  bottom: 1px;
  min-height: 0px;
  text-align: center;
  /*opacity: 0.0;*/
  background: #f78989;
  border-color: #f78989;
  color: #fff;
  border-radius: 3px;
  border: 0px;
  z-index: 10;
}

#dropzone.single-picture .dz-message {
  margin: 0px;
}
</style>
